window.onload = () => {
  class Wujie extends HTMLElement {
    constructor() {
      super();
      //  我们先创建一个shadowdom sha diu dom
      //  shadowdom 样式隔离;   不会影响外层样式
      let dom = this.attachShadow({ mode: "open" });
      let template = document.querySelector("#wujie") as HTMLTemplateElement;
      // 这样就可以吧template 里面的内容渲染到wu-jie 组件里
      dom.appendChild(template.content.cloneNode(true)); //true 深度克隆

      console.log("get atter ===", this.getAttr("url"), this.getAttr("age"));
      //   this.connectedcallback();
      //   this.disconnectedCallback();
      //   this.attributeChangedCallback("age", 10, 20);
    }
    /**
     * 传参 获取属性值
     */
    private getAttr(attr: string) {
      return this.getAttribute(attr);
    }
    //   生命周期
    //生命周期自动触发有东西插入
    connectedCallback() {
      console.log("类似于vue 的mounted");
    }
    //生命周期卸载
    disconnectedCallback() {
      console.log("类似于vue 的destory");
    }
    //跟watch类似
    attributeChangedCallback(name: any, oldVal: any, newVal: any) {
      console.log("跟vue 的watch 类似 有属性发生变化自动触发");
    }
  }
  //类似于vue组件 原生js写的一个组件
  window.customElements.define("wu-jie", Wujie); //挂载完成
};
